<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px 15px">
			此组件自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
		</demo-desc>
		
		<fu-cell-group>
			<block v-for="(item,index) in list" :key="index">
				<fu-cell :title="item.name" rightColor="#999999" isLink @click="list[index][`keyboardRef${index + 1}`].open()"></fu-cell>
			</block>
		</fu-cell-group>

		<fu-keyboard ref="keyboardRef1"></fu-keyboard>
		<fu-keyboard ref="keyboardRef2" mode="card"></fu-keyboard>
		<fu-keyboard ref="keyboardRef3" mode="car"></fu-keyboard>
		<fu-keyboard ref="keyboardRef4" mode="car" :disKeys="['京',2,'Q','X']" customabc @changeCarInputMode="changeCarInputMode">
			<template v-slot:abc>
				<text v-if="isABC">省份</text>
				<text v-else>ABC</text>
			</template>
		</fu-keyboard>
		<fu-keyboard ref="keyboardRef5" mode="number" dotDisabled></fu-keyboard>
		<fu-keyboard ref="keyboardRef6" mode="number" random></fu-keyboard>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref } from 'vue';
	
	// data数据
	const instance = getCurrentInstance();
	let isABC = ref(false);
	const keyboardRef1 = ref();
	const keyboardRef2 = ref();
	const keyboardRef3 = ref();
	const keyboardRef4 = ref();
	const keyboardRef5 = ref();
	const keyboardRef6 = ref();
	const list = ref([
		{ name: '数字键盘', keyboardRef1 },
		{ name: '身份证键盘', keyboardRef2 },
		{ name: '车牌号键盘', keyboardRef3 },
		{ name: '车牌号键盘切换键自定义&禁用按键', keyboardRef4 },
		{ name: '隐藏键盘"."符号', keyboardRef5 },
		{ name: '打乱键盘按键的顺序', keyboardRef6 },
	]);
	
	// methods方法
	const changeCarInputMode = (e) => {
		isABC.value = e;
	};
</script>

<style>
</style>